body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, silver, black);
}

.radar {
    width: calc(8em + 1.5em);
    height: calc(8em + 1.5em);
    background: linear-gradient( 90deg, transparent 49.75%, blue 49.75%, blue 50.25%, transparent 50.25%), linear-gradient( transparent 49.75%, blue 49.75%, blue 50.25%, transparent 50.25%), repeating-radial-gradient( transparent 0, transparent 0.95em, darkgreen 0.95em, darkgreen 1em), linear-gradient(black, black);
    font-size: 32px;
    position: relative;
    border-radius: 50%;
}

.radar::before {
    content: '';
    position: absolute;
    width: calc(8em / 2);
    height: calc(8em /2);
    background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 50%, rgba(0, 192, 0, 1) 100%);
    border-radius: 100% 0 0 0;
    top: calc(1.5em / 2);
    left: calc(1.5em / 2);
    animation: scanning 5s linear infinite;
    transform-origin: 100% 100%;
}

@keyframes scanning {
    to {
        transform: rotate(1turn);
    }
}